<template>
  <div class="">
    <!-- <one @cut="cut"></one>
      <two :str="parStr"></two> -->
    <my-header>
      <!-- v-slot 简写形式就是# -->
      <template #left="{ abc, cde }">
        <span @click="get(abc, cde)">返回</span>
      </template>
      <template #center> 商品列表 </template>
      <template #right> 编辑 </template>
    </my-header>
    <one></one>
    <two></two>
    <input type="text" v-focus/>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import one from '../components/one.vue';
import Two from '../components/two.vue';
import MyHeader from '../components/myHeader.vue';
export default {
  components: { one, Two, MyHeader },
  directives: {
    //  focus 是自定义指令的名称 （随意命名）
    focus:{
      mounted(el,binding){
        // el 是绑定 指令的dom节点
        // console.log(el);
        // console.log(binding);
        el.focus();
      }
    }
  },
  setup() {
    const parStr = ref('我是第2个组件');
    const cut = () => {
      parStr.value = '我是第3个组件'
    }
    const get = (val,val1) => {
      console.log(val,val1);
    }
    return {
      parStr,
      cut,
      get
    }
  },
};
</script>
<style lang="scss" scoped>
</style>